@font-face {
  font-family: Pitagon;
  src: url("./fonts/PitagonSansMono/PitagonSansMono-Regular.woff2") format("woff2");
  src: url("./fonts/PitagonSansMono/PitagonSansMono-Bold.woff2") format("woff2");
  src: url("./fonts/PitagonSansMono/PitagonSansMono-BoldItalic.woff2") format("woff2");
  src: url("./fonts/PitagonSansMono/PitagonSansMono-Italic.woff2") format("woff2");
  src: url("./fonts/PitagonSansMono/PitagonSansMono-Light.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}




/* --------------------------- ELEMENTS --------------------------- */

* {
  font-family: Pitagon;
}

html {
  min-height: 95%;
  height: auto;

  margin: 0;
  padding: 8px;

  font-size: 20px;
}

body {
  min-height: 90%;
  height: 100%;
  margin: 0.6rem;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  background: linear-gradient(146deg, #ff9400, #90f031, #2beec3);
  background-size: 600% 600%;
  animation: BackgroundAnimation 60s ease infinite;
  /* background: linear-gradient(24deg, rgba(19, 210, 221, 1) 0%, rgba(228, 183, 41, 1) 100%); */
}

.button_like {
  padding: 10px 20px;
  margin: 10px;

  border-radius: 100px;
  border: 1px black solid;
  cursor: pointer;

  background-color: #1fe0;
  /* Transparent */
}

footer {
  width: 100%;
  box-sizing: border-box;

  align-self: flex-end;
  
  text-align: right;
}

footer p {
  font-size: 0.8rem;
  margin-bottom: 0;
}



/* --------------------------- CLASSES --------------------------- */

.mini {
  font-size: 0.5rem;
  line-height: 0.1rem;
}

.italic {
  font-style: italic;
}

.vertical_align {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.horizontal_align {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


/* --------------------------- IDS --------------------------- */

#title {
  margin-top: 0;
  padding-bottom: 1rem;
  padding-left: 15%;
  /* For the border-bottom to expand more */
  padding-right: 15%;
  /* For the border-bottom to expand more */

  border-bottom: 1px black solid;

  font-size: 1rem;
}







/* ANIMATIONS */

@-webkit-keyframes BackgroundAnimation {
  0% {
    background-position: 49% 0%
  }

  50% {
    background-position: 52% 100%
  }

  100% {
    background-position: 49% 0%
  }
}

@-moz-keyframes BackgroundAnimation {
  0% {
    background-position: 49% 0%
  }

  50% {
    background-position: 52% 100%
  }

  100% {
    background-position: 49% 0%
  }
}

@-o-keyframes BackgroundAnimation {
  0% {
    background-position: 49% 0%
  }

  50% {
    background-position: 52% 100%
  }

  100% {
    background-position: 49% 0%
  }
}

@keyframes BackgroundAnimation {
  0% {
    background-position: 49% 0%
  }

  50% {
    background-position: 52% 100%
  }

  100% {
    background-position: 49% 0%
  }
}